<template>
	<view class="page" style="background-color: #fff; min-height: 300px;" :style="{minHeight: $device.measure.windowHeight + 'px'}">
		<cu-custom  :customStyle="{
			backgroundColor:'#ff7300'
		}" 
		:isBack="true" 
		:paddingHeight="0"
		>
			<template #backText>
				<view style="font-size: 18px;">兼职信息</view>
			</template>
		</cu-custom>
		
		<view v-if="currentTask" style="position: relative;background-color: #ffffff;" >
			
			<!-- 页头颜色框 -->
			<view style="height: 130px;background-image: linear-gradient(180deg,#ff7300,#ff872588);position: absolute;top: 0;left:0;right:0;border-radius: 0 0 20px 20px;z-index: 1;"></view>
			
			<!--卡片上端占位 -->
			<view style="height: 5px;"></view>
			
			<!-- 兼职卡片 -->
			<view style="background-color: white;margin: 0 10px 15px;padding-bottom: 1rpx;border-radius: 20rpx;z-index: 2;position: relative;box-shadow: 0px 5px 9px 3px rgb(117 115 115 / 23%);">
				<view class="bottom_line"  style="padding: 8px 15px 0px 15px;">
					<view style="font-size: 38rpx;font-weight: bold;margin-bottom: 0rpx;">
						{{currentTask.title}}
					</view>
					
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 10px 15px 10px;15px">
						<view style="font-size: 15px;font-weight: bold;font-size: 18px;margin:5px;color: #515151;">{{$dayjs(currentDate).format('YYYY年MM月DD日')}}</view>
						<!-- <view style="color: #989898;font-size: 15px;font-size: 12px;margin-top: 5px;display: flex;justify-content: center;align-items: center;"><u-icon name="info-circle" color="#989898"></u-icon> 到场时间:上午10:00</view> -->

						<!-- 倒计时 -->
<!-- 						<view style="color: white;margin:10px;display: flex;justify-content: center;align-items: center;background-color: #ff7300;border-radius: 100px;padding:5px 15px;box-shadow: 2px 2px 12px 0px #6f6f6f55;">
							报名截止:
							<u-count-down
							        :time="30 * 60 * 60 * 1000"
							        format="DD:HH:mm:ss"
							        autoStart
							        millisecond
							        @change="onChange"
							    >
							        <view class="time">
							            <text class="time__item">{{ timeData.days }}&nbsp;天</text>
							            <text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text>
							            <text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
							            <text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
							        </view>
							</u-count-down>
						</view> -->
					</view>
					
	
				</view>
				
				<!--商户名片-->
				<view style="display: flex;justify-content: space-between;margin:10px 10px 0;">
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<u-avatar  size="40" fontSize="15" :src="absUrl(currentTask.creator.head_icon_url)"></u-avatar>
						<view style="margin-left: 20rpx;">
							<view style="font-size: 24rpx;margin-bottom: 14rpx;">{{currentTask.creator.name}}</view>
							<view style="font-size: 22rpx;color: #b5b5b5;">3天之前 05:13</view>
						</view>
					</view>
					
					<view style="display: flex;align-items: center;">
						<view style="display: flex;align-items: center;padding: 14rpx 26rpx;background-color: #fffcd4;color: #ff9d00;border-radius: 10rpx;">
							<u-icon name="home-fill" color="#ff9d00"></u-icon>
							<span style="font-size: 24rpx;padding-left:3px">个人店铺</span>
						</view>
					</view>	
				</view>
				
				<view class="bottom_line" style="display: flex;align-items: center;">
					<view style="padding: 10px;">
						<span style="
						font-size: 24rpx; 
						color:#b6b6b6;"
						>广东掌聘人力资源有限公司</span>
						<span style="
							background-color: #fff6c7;
							border-radius: 100rpx;
							padding: 6rpx 20rpx;
							margin-left: 14rpx;
							text-align: center;
							color: #ff8725;
							font-size: 20rpx;
							">企业认证</span>
					</view>
				</view>
				
				<view style="display: flex;align-items: center;justify-content: space-between;">
					
					<view style="margin:3px 10px;display: flex;align-items: center;justify-content: flex-end;">
						<view style="padding:3px 15px;display: flex;flex-direction: column;justify-content: center;">
							<u-icon name="thumb-up-fill" size="20" color="#eebb00"></u-icon>
							<span style="font-size:20rpx">点赞</span>
						</view>
						
						<view style="padding:3px 15px;display: flex;flex-direction: column;justify-content: center;">
							<u-icon name="heart-fill" size="20" color="#ee7147"></u-icon>
							<span style="font-size:20rpx">收藏</span>
						</view>
						
						<view style="padding:3px 15px;display: flex;flex-direction: column;justify-content: center;">
							<u-icon name="share-fill" size="20" color="#a0e253"></u-icon>
							<span style="font-size:20rpx">转发</span>
						</view>
					</view>
					
					<view @click="onInvite" style="display: flex;align-items: center;margin:0 10px ;padding: 14rpx 26rpx;background-color: #fc8319;color: #ff9d00;border-radius: 10rpx;">
						<u-icon name="share-square" color="white"></u-icon>
						<span style="font-size: 24rpx;padding-left:3px;color:white">邀请报名</span>
					</view>
				</view>
			</view>
			
			<!-- 日历滚动条 -->
			<view style="background-color: white;padding-bottom: 5px;">
<!-- 				<job-calendar @change="onClickDay" :date="currentDate">
					<template #text="{index}">
						{{itineraryText(index)}}
					</template>
				</job-calendar> -->
			</view> 
			
			<!-- 地图位置卡片 -->
			<view @click="openMap" style="margin:10px 10px;box-shadow: rgb(186 186 186 / 51%) 0px 0px 10px 0px;border-radius: 5px;overflow: hidden;">
				<view style="display: flex;align-items: center;">
					<view style="flex:1;">
						<view style="display: flex;padding:8px 8px;align-items: flex-start;justify-content: space-between;">
							<view>{{currentTask.location_name}}</view>
							<view style="font-size: 22rpx;color: #777;">{{currentTask.province}} {{currentTask.city}} {{currentTask.district}}</view>
						</view>
						<view style="display: flex;padding:0px 8px 8px 4px;color:#999;align-items: flex-start;">
							<u-icon name="map" :custom-style="{paddingRight:'3px'}"></u-icon>
							<span style="font-size: 24rpx;">{{currentTask.address}}</span>
						</view>
					</view>
					
					<view style="padding:5px">
						<u-icon name="arrow-right"></u-icon>
					</view>
					
				</view>
				<view style="height: 70px;">  
					<map style="width: 100%; height: 100%;" 
					scale="18"
					:latitude="currentTask.latitude" 
					:longitude="currentTask.longitude" 
					:markers="[
						{
							id: 0,
							latitude: currentTask.latitude,
							longitude: currentTask.longitude,
							width: 20,
							height: 28,
							iconPath: absUrl('/static/tar-small.png')
						}
					]">
					</map>
				</view>
			</view>
			
			<!-- 兼职详情卡片 -->
			<!-- 班次时间 -->
			<view style="flex-direction: column;display: flex;margin:10px 0px;">
				<view style="background-color: white;border-radius: 20rpx;z-index: 22;position: relative;box-shadow: rgb(186 186 186 / 51%) 0px 0px 10px 0px;margin:0 10px">
					<view v-for="(item,index) in currentTask.jobs" style="margin: 0px;border-top: solid 1rpx #e2e2e2;padding: 15px 10px;display: flex;justify-content: space-between;align-items: center;">
						<view style="width:25%;font-size: 13px;">{{item.name}}</view>
						<view style="width:45%;font-size: 14px;text-align: center;">{{fixedTime(item.start_time)}}-{{fixedTime(item.end_time)}}</view>
						<view style="width:30%;text-align:right;"> 
							<span style="flex:0 0 40%;font-size: 28rpx;color: #f00;">{{item.price}}元/{{item.price_type}}/{{item.settle_type}}</span>
							<!-- <span style="font-size: 24rpx;color: #9c9c9c;">{{item.num}}人</span> -->
						</view>
					</view>

				</view>
			</view>
			
			<!-- 工作详情 -->
			<view style="flex-direction: column;display: flex;margin:10px 10px;">
				<view style="padding: 10px;background-color: white;border-radius: 20rpx;z-index: 22;position: relative;box-shadow: rgb(186 186 186 / 41%) 0px 0px 6px 0px;">
					<view style="border-bottom: solid 1rpx #eee;padding-bottom: 5px;">工作详情:</view>
					<view style="text-indent: initial;line-height: 50rpx;font-size: 12px;padding: 5px 0;">
						<u-parse  @ready="load" :content="currentTask.content" :selectable="true"></u-parse>
					</view>
				</view>
			</view>
		</view>
		
		 <!-- 调岗选项 -->
		<u-popup :show="showSchedulePopup" @close="showSchedulePopup=false">
			<!-- 名片卡 -->
			<view style="margin: 0px;padding: 10px 10px;">
				<view style="display: flex;justify-content: flex-start;align-items: center;">
					<view style="flex:0 0 40%;font-size: 14px;display: flex;justify-content: flex-start;align-items: center;">
						<view style="margin: 5px;"><u-avatar size="40" :src="absUrl(userStore.baseInfo.head_icon_url)"></u-avatar></view>
						<text>{{userStore.baseInfo.name}}</text>
					</view>
					<view style="flex:0 0 60%;">
						<view style="display: flex;flex-direction: column;font-size: 12px;justify-content: space-between;color: #363636;">
							<view style="margin: 2px;display: flex;">
								<text>性别:&nbsp;{{userStore.baseInfo.sex}}</text>
								<text style="margin-left: 20px;">年龄:&nbsp;{{userStore.baseInfo.old}}</text>
							</view>
							<view style="margin: 2px;">电话:&nbsp;{{userStore.baseInfo.phone_number}}</view>
							<view style="margin: 2px;">身份证:&nbsp;{{userStore.baseInfo.id_number}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 岗位选项 -->
			<view  style="flex-direction: column;display: flex;">
				<view class="work-list" style="background-color: white;z-index: 22;position: relative;">
					<view @click="onEnrollJob(item)" v-for="(item,index) in currentTask.jobs" style="padding: 20px 10px;border-top: solid 1rpx #e2e2e2;display: flex;justify-content: space-between;align-items: center;">
						<view style="width:25%;font-size: 14px;">{{item.name}}</view>
						<view style="width:45%;font-size: 14px;text-align: center;">{{fixedTime(item.start_time)}}-{{fixedTime(item.end_time)}}</view>
						<view style="width:30%;text-align:right;"> 
							<span style="flex:0 0 40%;font-size: 28rpx;color: #f00;">{{item.price}}元/{{item.price_type}}/{{item.settle_type}}</span>
							<!-- <span style="font-size: 24rpx;color: #9c9c9c;">{{item.num}}人</span> -->
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<view style="height: 120rpx;"></view>

		<!-- 底部操作按钮 -->
		<view
			style="background-color: #fff;width: 100%;height: 120rpx;box-shadow: 1px 9px 20px 0px #000000d4;position: fixed;bottom: 0;z-index: 100;">
			<view @click="onPopUpEnroll" style="
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				">
				<view style="flex: 0 0 100%;">
					<view class="cu-btn round" style="
							display: flex;
							margin: 0 20rpx;
							border-radius: 250px;
							font-size: 30rpx;
							background-color: #ff8725d4;
							color: white;
							height: 90rpx;
						">
							{{details_preview?'退出预览':isShowState?'已报名,查看进度':'立即报名'}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 报名确认对话框 -->
		<u-modal :show="showModal" width="320px"
			closeOnClickOverlay
			@close="showModal=false"
			@confirm="onModalConfirm"
		>
			<view v-if="currentJob" style="width: 100%;padding-bottom: 10px;">
				<view style="text-align: center;padding: 20px;border-bottom: solid 1rpx #eee;font-size: 16px;">请确认报名信息:</view>
				<view style="margin: 0px;padding: 10px 10px;border-bottom: solid 1rpx #eee;">
					<view style="display: flex;justify-content: flex-start;align-items: center;">
						<view style="flex:0 0 40%;font-size: 14px;display: flex;justify-content: flex-start;align-items: center;">
							<view style="margin: 5px;"><u-avatar size="40" :src="absUrl(userStore.baseInfo.head_icon_url)"></u-avatar></view>
							<text>{{userStore.baseInfo.name}}</text>
						</view>
						<view style="flex:0 0 60%;">
							<view style="display: flex;flex-direction: column;font-size: 12px;justify-content: space-between;color: #363636;">
								<view style="margin: 2px;display: flex;">
									<text>性别:&nbsp;{{userStore.baseInfo.sex}}</text>
									<text style="margin-left: 20px;">年龄:&nbsp;{{userStore.baseInfo.age}}</text>
								</view>
								<view style="margin: 2px;">电话:&nbsp;{{userStore.baseInfo.phone_number}}</view>
								<view style="margin: 2px;">身份证:&nbsp;{{userStore.baseInfo.id_number}}</view>
							</view>
						</view>
					</view>
				</view>
				
				<view  style="flex-direction: column;display: flex;padding: 0px 20px;border-bottom: solid 1rpx #eee;">
					<view class="work-list" style="background-color: white;z-index: 22;position: relative;">
						<view style="margin: 0px;padding: 20px 0px;display: flex;justify-content: space-between;align-items: center">
							<view style="width:28%;font-size: 14px;">{{currentJob.name}}</view>
							<view style="width:37%;font-size: 14px;text-align: center;">
								<view>{{fixedTime(currentJob.start_time)}} 上班</view>
								<view>{{fixedTime(currentJob.end_time)}} 下班</view>
							</view>
							<view style="width:35%;text-align:right;"> 
								<span style="flex:0 0 40%;font-size: 28rpx;color: #f00;">{{currentJob.price}}元/{{currentJob.price_type}}/{{currentJob.settle_type}}</span>
								<!-- <span style="font-size: 24rpx;color: #9c9c9c;">{{item.num}}人</span> -->
							</view>
						</view>
					</view>
				</view>
			
				<view style="color: #989898;font-size: 15px;font-size: 12px;margin-top: 5px;display: flex;justify-content: center;align-items: center;padding:10px"><u-icon name="info-circle" color="#989898"></u-icon>确认报名后,扫码入群,统一安排。</view>
			</view>
			<template #confirmButton>
				<u-button
					text="确定"
					type="success"
					shape="circle"
					@click="onModalConfirm"
				></u-button>
			</template>
		</u-modal>
		 
		<u-action-sheet @close="closeSortItemSheet" @select="selectSortItem" :closeOnClickOverlay="true" :closeOnClickAction="true"  cancelText="取消" :actions="sortItems"  :show="showSortItemSheet"></u-action-sheet>
		<!-- <u-button @click="show = !show">打开</u-button> -->
		<u-calendar @close="dateClose" color="#ff8725" :show="show" :closeOnClickOverlay="true"></u-calendar>
		
		<u-overlay :show="showPost" @click="showPost = false">
				<view style="width: 650rpx;margin: 10px auto">
					<job-poster v-if="showPost" :qrcode-text="pageUrl(`${currentPageUrl()}?id=${parseId}`)" @save="savePost" :task="currentTask"></job-poster>
				</view>
		</u-overlay>
		
		<login-guard ref="loginGurad" ></login-guard>
	</view>
</template>

<script>
	import {usePageParamStore} from '@/stores/pageParams.js'
	import jobData from '@/utils/data/workData.js'
	import timeTextFormat from '@/utils/mixins/time-text-format.js'
	import jobPoster from '@/components/posters/lime-painter.vue'
	
	export default {
		components:{jobPoster},
		mixins:[jobData,timeTextFormat],
		setup() {
			let pageParam = usePageParamStore()
			return {pageParam}
		},
		data() {
			return {
				parseId:null,
				showPost:false,
				currentDate:null,
				loadding:false,
				enrollOrder:null,
				list1: [{
						name: '报名',
					}, {
						name: '确认',
					}, {
						name: '签到'
					}, {
						name: '签退'
					}, {
						name: '验收'
					}, {
						name: '发薪'
					}],
				users:[
					{
						name:'宋泽涛',
						phone: '15478954678',
						sex: '男',
						number: '455678200302031452',
						old:'24'
					},
					{
						name:'韦瑜颖',
						phone: '16678953978',
						sex: '女',
						number: '425678200102032478',
						old:'23'
					},
				],
				showModal:false,
				currentTask:null,
				currentJob:null,
				currentTabsDate:0,
				showSchedulePopup:false,
				currentSelectSortItem:0,
				show:false,
				showSortItemSheet:false,
				timeData: {
					day:1,
					hours:30,
					minutes:50,
					seconds:21
				},
				tabList: [{
                    name: '全部',
                },{
                    name: '今天',
                }, {
                    name: '昨天',
                }, {
                    name: '选择时间',
                }],
				sortItems: [
					{
						name:'提交时间正序',
						color:'#ffaa7f',
						index:0
					},
					{
						name: '提交时间倒序',
						color:'#ffaa7f',
						index:1
					}
				],
				//latitude="22.803751" longitude="113.293719"
				covers: [{
					id: 0, // 使用 marker点击事件 需要填写id
					latitude: 22.803751,
					longitude: 113.293719,
					width: 20,
					height: 28,
					iconPath: 'http://192.168.1.6/static/tar-small.png'
				}, {
					id: 1, // 使用 marker点击事件 需要填写id
					latitude: 22.803751,
					longitude: 113.293719,
					width: 20,
					height: 28,
					iconPath: 'http://192.168.1.6/static/tar-small.png'
				}],
			}
		},
		async onLoad(options){
			console.log(options)
			
			if(!!!options.id) return 
			
			this.parseId = options.id
			this.details_preview = options.preview
			
			let res = await this.$http.get(`/common/job/task/details?task_id=${options.id}`)
			console.log(res.data)
		
			this.currentTask = res.data
			this.currentDate = this.currentTask.start_date
			
			console.log(this.currentTask)
		},
		onShow(){
			if(!!!this.parseId)
			{
				this.currentTask = this.pageParam.task_details
				this.currentDate = this.currentTask.start_date
			}

			if(this.details_preview) return 
			
			let that = this
			console.log(this.pageParam.task_details)
			
			this.$http.get('/common/job/task/itinerary',{
				params:{
					source_id:this.pageParam.task_details.source_id
				}
			}).then((res)=>{
				console.log(res.data)
				that.itinerary = res.data
				console.log(that.itinerary)
				// this.$http.get(`/common/job/task/list?start_date=${that.itinerary[0].start_date}&page=1`).then((res)=>{
				// 	console.log(res.data)
				// 	that.workJobs = res.data.data
				// 	that.loading = false
				// 	//this.$refs.uToast.hide()
				// })
			})
			
			if(!that.userStore.isLogin)
			{
				// uni.showToast({
				// 	icon:'error',
				// 	title:'未登录'
				// })
				return
			}
			 
			this.$nextTick(async ()=>{
				that.updateState()
			})
		},
		computed: {
			isShowState(){
				console.log(this.enrollOrder)
				return this.enrollOrder != null
			},
		},
		methods: {
			openMap() {
				let that = this
				uni.showActionSheet({
					itemList: ['百度地图','高德地图', '腾讯地图'],
					success: function(res) {
						//that.guide(res.tapIndex)
						let location = { 
							lat:that.currentTask.latitude, 
							lng:that.currentTask.longitude, 
							name:that.currentTask.location_name, 
							address:that.currentTask.address,
						}
						console.log(location)
						that.$geo.navToMap(location,res.tapIndex)
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			onInvite(){
				this.showPost = true
			},
			async onClickDay(i,date){
				if(this.currentDate == date) return
				
				this.currentDate = date
				
				let res = await this.$http.get('/common/job/task/list',{
					params:{
						start_date:date,
						source_id:this.currentTask.source_id
					},
				});
				
				if(res.data.length == 0) return 
				
				this.currentTask= res.data[0]
				
				console.log(res)
			},
			async updateState()
			{
				this.loadding = true
				
				let loginResult = await this.$refs.loginGurad.require()
				
				// if(!loginResult)
				// {
				// 	uni.showToast({
				// 		icon:'error',
				// 		title:'登录失败,请先登录.'
				// 	})
				// 	return
				// }
				
				uni.showLoading({
					title:'正在加载'
				})
				
				
				let res = await this.$http.get('/user/enroll',{
					params:{
						job_project_id: this.pageParam.task_details.id
					}
				})
				
				uni.hideLoading()
				
				console.log(res)
				
				this.loadding = false
				
//				let that = this
				// this.$nextTick(()=>{
				// 	that.$refs.uReadMore.init()
				// })
				
				if(res.data)
				{
					this.enrollOrder = res.data
					
					uni.showToast({
						icon:'error',
						title:'已经报名,请联系管理员.'
					})

					return true
				}else
				{
					return false
				}
			},
			onChange(e) {
				this.timeData = e
			},
			load() {
				//this.$refs.uReadMore.init();
			},
			click(item) {
				console.log(item)
				
				if(item.index == 3)
				{
					this.show = true
				}
			},
			dateClose(){
				this.show = false
			},
			onSort(){
				this.showSortItemSheet = true
			},
			closeSortItemSheet(){
				this.showSortItemSheet = false
				//console.log(this.currentSelectSortItem),
			},
			selectSortItem(index){
				this.currentSelectSortItem = index
				console.log(this.currentSelectSortItem)
			},
			async onPopUpEnroll(){
				//this.showModal = true

				if(this.details_preview)
				{
					uni.navigateBack()
					return
				}

				if(!this.userStore.isLogin)
				{
					await this.$refs.loginGurad.require()
					let result = await this.updateState()
					
					if(result) return
				}
					
				if(!this.isShowState)
				{
					console.log(this.pageParam.project)
					// await this.requireInfo()
					
					let that = this
					setTimeout(()=>{
						that.showSchedulePopup = true
					},500)
					
				}else
				{
					uni.redirectTo({
						url:`/pages/job/user/job-state/job-state?task_id=${this.parseId}`
					})
				}
			},
			onEnrollJob(job){
				this.showSchedulePopup = false
				this.currentJob = job
				this.showModal = true
				
				console.log(job)
			},
			async onModalConfirm(){
				
				uni.showLoading({
					title:'正在报名2'
				})
				
				this.showModal = false
				
				console.log(this.currentJob.id)
				  
				let res = await this.$http.post('/user/job/enroll/create',{
					'job_project_id': this.currentJob.task_id || this.currentJob.task,
					'expected_job_id' : this.currentJob.id
				})
				
				console.log(res)
				this.enrollOrder = res.data
				
				uni.hideLoading()
				
				uni.showToast({
					title:'报名成功'
				})
				
				setTimeout(()=>{
					uni.redirectTo({
						url:`/pages/job/user/job-state/job-state?task_id=${this.parseId}`
					})
				},500)
			}
		}
	}
</script>

<style scoped>
	.page :deep(.u-modal__content) {
		padding: 0;
		padding-top: 0px !important;
	}
	
	.work-list :deep(.u-cell__body) {
		padding: 5px 10px 5px 10px;
	}
	
	.work-list :deep(.u-collapse-item__content__text) {
		padding: 0px 0px 0px 0px;
	}
	
	.avatar:active {
		transform: scale(0.95);
	}
	
	.btn:active {
		background-color: aliceblue;
	}
</style>
